<template>
  <v-row no-gutters>
      <v-col lg="6" offset-lg="3" md="8" offset-md="2" sm="10" offset-sm="1">
        <v-card flat outline class="mt-12">
          <v-toolbar color="" flat>
            <v-toolbar-title class="headline black--text">
              登录
            </v-toolbar-title> 
          </v-toolbar>
          <v-card-text class="px-8">
            <v-form ref="form" v-model="valid">
              <v-col>
                  <v-text-field label="账号/邮箱" v-model.trim="username" :rules="rules" validate-on-blur color="black"></v-text-field>
              </v-col>
              <v-col>
                  <v-text-field label="密码" type="password" v-model.trim="password" :rules="rules" validate-on-blur color="black"></v-text-field>
              </v-col>
            </v-form>
            <v-col>
              <v-row justify="end">
                <v-btn text color="transpaent" large>forget password</v-btn>
              <v-btn text large>Login</v-btn>
              </v-row>
            </v-col>
          </v-card-text>
        </v-card>
      </v-col>
  </v-row>
</template>

<script>
import jquery from '../plugins/formVaildate'

export default {
  data () {
    return {
      username: '',
      password: '',
      valid: false,
      length_control: false,
      space_control: true,
      cn_control: false,
    }
  },
  computed: {
    rules () {
      const rules = []
      if (this.length_control) {
        let rule = v => jquery.lengthcontrol(v, 1, 30)
        rules.push(rule);
      }
      if (true) {
        let rule = v => (v || "").length !== 0 ? true : '不能为空';
        rules.push(rule);
      }
      if (this.space_control) {
        let rule = v => jquery.nospace(v);
        rules.push(rule);
      }
      if (this.cn_control) {
        let rule = v => jquery.nocn(v);
        rules.push(rule);
      }
      return rules
    }
  }
};
</script>

<style>
.theme--light.v-label {
    color: rgba(0, 0, 0, 0.8);
}
</style>